<script setup lang="ts">
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

defineOptions({
  name: 'ChildCardModal',
});

interface Emits {
  (e: 'success'): void;
}

interface ModalPayload {
  cardNumber?: string;
}

const emit = defineEmits<Emits>();

const formData = ref({
  cardNumber: '',
  childCount: 1,
});

const decreaseCount = () => {
  if (formData.value.childCount > 1) {
    formData.value.childCount--;
  }
};

const increaseCount = () => {
  formData.value.childCount++;
};

const [Modal, modalApi] = useVbenModal({
  showCancelButton: false,
  showConfirmButton: false,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return;
    }
    const data = modalApi.getData<ModalPayload>();
    formData.value = {
      cardNumber: data?.cardNumber || '',
      childCount: 1,
    };
  },
});

const handleConfirm = () => {
  if (!formData.value.cardNumber.trim()) {
    message.warning('请输入手牌号');
    return;
  }

  // 这里可以调用API进行儿童手牌开牌
  message.success(
    `儿童手牌开牌成功，手牌号: ${formData.value.cardNumber}，儿童人数: ${formData.value.childCount}`,
  );
  emit('success');
  modalApi.close();
};

const handleCancel = () => {
  modalApi.close();
};
</script>

<template>
  <Modal title="儿童手牌" :width="400" :show-confirm-button="false">
    <div class="child-card-modal">
      <div class="form-item">
        <label>手牌号:</label>
        <a-input
          v-model:value="formData.cardNumber"
          placeholder='点击"Enter"录入'
          @keyup.enter="handleConfirm"
        />
      </div>

      <div class="form-item">
        <label>儿童人数:</label>
        <div class="number-input">
          <a-button
            type="primary"
            shape="circle"
            size="small"
            @click="decreaseCount"
            :disabled="formData.childCount <= 1"
          >
            -
          </a-button>
          <span class="count-display">{{ formData.childCount }}</span>
          <a-button
            type="primary"
            shape="circle"
            size="small"
            @click="increaseCount"
          >
            +
          </a-button>
        </div>
      </div>

      <div class="modal-actions">
        <a-button type="primary" @click="handleConfirm">确定</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </div>
    </div>

  </Modal>
</template>

<style scoped>
.child-card-modal {
  padding: 20px 0;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.number-input {
  display: flex;
  gap: 15px;
  align-items: center;
}

.count-display {
  min-width: 30px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}
</style>
